<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <div class="clear"></div>

    <b class="line"></b>
    <div class="center" style="margin-top:0;">
      <div class="col-main">
        <div class="main-wrap">

          <div class="user-orderinfo">

            <!--标题 -->
            <div class="am-cf am-padding">
              <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单详情</strong> / <small>Order&nbsp;details</small></div>
            </div>
            <hr />
          
            <div class="order-infoaside">
              <div class="order-addresslist" v-if="!order.orderStatus == 0">
                <div class="order-address">
                  <div class="icon-add">
                  </div>
                  <p class="new-tit new-p-re">
                    <span class="new-txt">{{checkAddr.name}}</span>
                    <span class="new-txt-rd2">{{checkAddr.phone}}</span>
                  </p>
                  <div class="new-mu_l2a new-p-re">
                    <p class="new-mu_l2cw">
                      <span class="title">收货地址：</span>
                      <span class="province">{{checkAddr.province}}</span>
                      <span class="city">{{checkAddr.city}}</span>
                      <span class="dist">{{checkAddr.county}}</span>
                      <span class="street">{{checkAddr.details}}</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-infomain">

              <div class="order-top">
                <div class="th th-item">
                  商品
                </div>
                <div class="th th-price">
                  单价
                </div>
                <div class="th th-number">
                  数量
                </div>
                <div class="th th-operation">
                  商品操作
                </div>
                <div class="th th-amount">
                  合计
                </div>
                <div class="th th-status">
                  交易状态
                </div>
                <div class="th th-change">
                  交易操作
                </div>
              </div>

              <div class="order-main">

                <div class="order-status3">
                  <div class="order-title">
                    <div class="dd-num">订单编号：<a href="javascript:;">{{order.id}}</a></div>
                    <span>成交时间：<em v-text="dateFormatter(order.createTime)"></em></span>
                    <!--    <em>店铺：小桔灯</em>-->
                  </div>
                  <div class="order-content">
                    <div class="order-left">
                      <ul class="item-list" v-for="item in order.orderDetails">
                        <li class="td td-item">
                          <div class="item-pic">
                            <a href="javascript:;;" v-on:click="toItem(item.itemId)" class="J_MakePoint">
                              <img v-bind:src="item.mainImg" class="itempic J_ItemImg">
                            </a>
                          </div>
                          <div class="item-info">
                            <div class="item-basic-info">
                              <a href="#">
                                <p>{{item.itemName}}</p>
                                <p class="info-little">颜色：12#川南玛瑙
                                  <br />包装：裸装 </p>
                              </a>
                            </div>
                          </div>
                        </li>
                        <li class="td td-price">
                          <div class="item-price">
                            {{item.transPrice}}
                          </div>
                        </li>
                        <li class="td td-number">
                          <div class="item-number">
                            <span>×</span>{{item.buyNum}}
                          </div>
                        </li>
                        <li class="td td-operation">
                          <div class="item-operation">
                            查看快照
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="order-right">
                      <li class="td td-amount">
                        <div class="item-amount">
                          合计：<em v-text="order.transPrice+order.postage"></em>
                          <p v-if="order.tradeType==1">含运费：<span>{{order.postage}}</span></p>
                        </div>
                      </li>
                      <div class="move-right">
                        <li class="td td-status">
                          <div class="item-status">
                            <p class="Mystatus" v-text="orderStatusFormatter(order.orderStatus)"></p>
                          </div>
                        </li>
                        <li class="td td-change">
                          <p v-if="order.orderStatus==4||order.orderStatus==12" class="order-info" v-else><a href="javascript:;;" style="color:#E6A23C" v-on:click="del(order.id)">删除订单</a></p>
                          <p class="order-info" v-else><a href="javascript:;;" style="color:#E6A23C" v-on:click="cancel(order.id)">取消订单</a></p>
                          <p class="order-info"><a href="javascript:;;" style="color:#409EFF" v-on:click="toPay(order.id)" v-if="order.orderStatus==2">去支付</a></p>
                          <p class="order-info"><a href="javascript:;;" style="color:#409EFF" v-on:click="toConfirm(order.id)" v-if="order.orderStatus==0">去支付</a></p>
                          <p class="order-info"><a href="logistics.html" v-if="order.tradeType==3 && order.orderStatus>=13">查看物流</a></p>
                        </li>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>

        </div>
        <!--底部-->
        <foot></foot>

      </div>
      <leftmenu></leftmenu>
    </div>
    <navfull></navfull>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'orderinfo',
  data () {
    return {
      transType: 0,
      payType: 2,
      order: {},
      allPrice: 0,
      allPostage: 0,
      integral: false,
      checkAddr: {}
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.qryOrders();
  },
  methods: {
    formatterTransType () {
      switch (this.transType) {
        case 1:
          return "邮寄";
        case 2:
          return "面交";
        case 3:
          return "自提";
        default:
          return "未选择";
      }
    },
    qryOrders () {
      var orderId = this.$route.query.orderId;
      this.axios.get("/trade/order/orders", {
        params: {
          orderIds: orderId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.order = result.data[0];
          this.transType = this.order.tradeType;
          this.allPrice += this.order.transPrice;
          this.allPostage += this.order.postage;
          var addrId = this.order.addressId;
          this.axios.get("/user/address/address", {
            params: {
              id: addrId
            }
          }).then((res) => {
            var result = res.data;
            if (result.code == 200) {
              this.checkAddr = result.data;
            }
          })
        }
      })
    },
    toItem (itemId) {
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    dateFormatter (date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    },
    orderStatusFormatter (state) {
      switch (state) {
        case 0:
          return "待提交"
        case 1:
          return "已提交"
        case 2:
          return "待支付"
        case 3:
          return "已支付"
        case 4:
          return "已取消"
        case 11:
          return "已确认"
        case 12:
          return "卖家取消"
        case 13:
          return "待收货"
        case 14:
          return "待评价"
        case 15:
          return "已完成"
      }
    },
    toPay (orderId) {
      this.$router.push({
        name: "pay",
        query: {
          orderId: orderId
        }
      })
    },
       toConfirm(orderId) {
       this.$router.push({
        name: "orderconfirm",
        query: {
          orderId: orderId+"&&"
        }
      })
    },
  }
}

function add0 (m) {
  return m < 10 ? '0' + m : m
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/personal.css";
@import "../../../assets/css/orstyle.css";
</style>
